<template>
    <a-card class="appCard" hoverable @click="doCardClick">
        <template #actions>
            <span class="icon-hover" @click="doShare"> <IconShareInternal /> </span>
        </template>
        <template #cover>
            <div :style="{
          height: '204px',
          overflow: 'hidden',
        }">
                <img
                        :alt="app.appName"
                        :src="app.appIcon ? app.appIcon : myAppIcon"
                        :style="{width:'100%',transform:'translateY(-20px)'}"
                />
            </div>
        </template>
        <a-card-meta :title="app.appName" :description="app.appDesc">
            <template #avatar>
                <div
                        :style="{ display: 'flex', alignItems: 'center', color: '#1D2129' }"
                >
                    <a-avatar :size="24" :image-url="app.user?.userAvatar ?? myAvatar" :style="{ marginRight: '8px' }">
                    </a-avatar>
                    <a-typography-text>{{app.user?.userName}}</a-typography-text>
                </div>
            </template>
        </a-card-meta>
    </a-card>
    <ShareModal ref="shareModalRef" :link="shareLink" title="应用分享" />
</template>

<script setup lang="ts">
    import { IconShareInternal } from "@arco-design/web-vue/es/icon";
    import API from "@/api";
    import { defineProps, withDefaults } from "vue";
    import { useRouter } from "vue-router";
    import {ref} from 'vue'
    import ShareModal from '@/components/ShareModal.vue'
    import {myAppIcon} from '@/constant/photo'
    import {myAvatar} from '@/constant/photo'

    const router = useRouter();

    //获取父组件传来的参数
    interface Props{
        app:API.AppVO;
    }
    const props = withDefaults(defineProps<Props>(),{
        app:() =>{
            return{};
        }
    })

    const doCardClick = () =>{
        router.push(`/app/detail/${props.app.id}`)
    }

    /**
     * 分享的操作
     */
    //拼接字符串（为了区分线上和本地或者更改域名的情况）
    const shareLink = `${window.location.protocol}//${window.location.host}/app/detail/${props.app.id}`
    const shareModalRef = ref();
    const doShare =(e:Event) =>{
        if(shareModalRef.value){
            shareModalRef.value.handleClick();
        }
        //阻止冒泡
        e.stopPropagation()
    }
</script>

<style scoped>
    .appCard {
        cursor: pointer;
        /*padding-left: 30px;*/
        /*margin-right: 8px;*/
        /*margin: 0 auto;*/
    }

    .icon-hover {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        transition: all 0.1s;
    }

    .icon-hover:hover {
        background-color: rgb(var(--gray-2));
    }
</style>